import 'dart:ui';
import 'package:circular_check_box/circular_check_box.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import '../public.dart';

/// 我的页面
class LoginPage extends StatefulWidget {
  LoginPage({Key key}) : super(key: key);

  @override
  _LoginPageState createState() {
    return _LoginPageState();
  }
}

class _LoginPageState extends State<LoginPage> {
  bool check = false;
  ThemeProvider theme;
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    theme = Provider.of<ThemeProvider>(context);
    return Scaffold(
        backgroundColor: theme.primaryColor,
        appBar: AppBar(
          title: Text('登录'),
          backgroundColor: theme.primaryColor,
          leadingWidth: 44,
          leading: BackComponent(),
        ),
        body: SingleChildScrollView(
            child: Column(children: [
          Container(
            height: 200,
            margin: EdgeInsets.only(bottom: 8),
            decoration: BoxDecoration(
                image: DecorationImage(
                    fit: BoxFit.contain,
                    alignment: Alignment.topCenter,
                    image: AssetImage(AppConfig.ASSETS_PATH + 'delu_pic.png'))),
          ),
          Padding(
              padding: EdgeInsets.only(left: 16, right: 16),
              child: Column(children: [
                Text('156****0982',
                    style: TextStyle(
                      fontSize: 28,
                      color: Colors.white,
                    )),
                Container(
                    height: 20,
                    margin: EdgeInsets.only(top: 8, bottom: 48),
                    padding: EdgeInsets.only(left: 4, right: 4),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(4),
                        color: ColorUtil.rgba(255, 255, 255, 0.15)),
                    child: Text('中国联通认证',
                        style: TextStyle(
                            fontSize: 10, height: 1.8, color: Colors.white))),
                Stack(clipBehavior: Clip.none, children: [
                  FlatButton(
                      onPressed: () {
                        print('萌新登录送积分红包');
                      },
                      height: 48,
                      minWidth: double.infinity,
                      textColor: ColorUtil.rgba(51, 51, 51, 1),
                      shape: RoundedRectangleBorder(
                          side: BorderSide.none,
                          borderRadius: BorderRadius.all(Radius.circular(24))),
                      color: ColorUtil.rgba(255, 215, 59, 1),
                      child: Text(
                        '萌新登录送积分红包',
                        style: TextStyle(fontSize: 18),
                      )),
                  Positioned(
                      top: -24,
                      right: 16,
                      child: Image.asset(AppConfig.ASSETS_PATH + 'hbzs_32.png',
                          width: 32, height: 32))
                ]),
                SizedBox(
                  height: 16,
                ),
                FlatButton(
                    onPressed: () {
                      print('其他手机号登录');
                    },
                    height: 48,
                    minWidth: double.infinity,
                    textColor: ColorUtil.rgba(255, 255, 255, 0.6),
                    shape: RoundedRectangleBorder(
                        side: BorderSide.none,
                        borderRadius: BorderRadius.all(Radius.circular(24))),
                    color: ColorUtil.rgba(255, 255, 255, 0.05),
                    child: Text(
                      '萌新登录送积分红包',
                      style: TextStyle(fontSize: 18),
                    )),
                SizedBox(
                  height: 16,
                ),
                Text(
                  '登录即享全场漫画免费看，边看边赚钱',
                  style: TextStyle(
                    fontSize: 12,
                    color: ColorUtil.rgba(255, 255, 255, 0.3),
                  ),
                ),
                SizedBox(
                  height: 32,
                ),
                Padding(
                  padding: EdgeInsets.only(left: 40, right: 40),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                          width: 22,
                          height: 22,
                          margin: EdgeInsets.only(right: 4),
                          child: Stack(clipBehavior: Clip.none, children: [
                            Positioned(
                              left: -45,
                              top: -38,
                              child: Container(
                                  child: Column(
                                children: [
                                  Container(
                                    height: 32,
                                    padding: EdgeInsets.only(left: 8, right: 8),
                                    decoration: BoxDecoration(
                                        color: ColorUtil.rgba(254, 45, 102, 1),
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(8))),
                                    child: Text(
                                      '请勾选同意后登录',
                                      style: TextStyle(
                                          fontSize: 12,
                                          height: 2.2,
                                          color: ColorUtil.rgba(255, 255, 255)),
                                    ),
                                  ),
                                  // 三角形
                                  RotatedBox(
                                      quarterTurns: 90,
                                      child: ClipPath(
                                          child: Container(
                                            height: 5,
                                            width: 9,
                                            color:
                                                ColorUtil.rgba(254, 45, 102, 1),
                                          ),
                                          clipper: TrianglePath())),
                                ],
                              )),
                            ),
                            Positioned(
                                top: -2,
                                child: SizedBox(
                                    width: 22,
                                    height: 22,
                                    child: FittedBox(
                                        child: CircularCheckBox(
                                            value: this.check,
                                            inactiveColor:
                                                ColorUtil.rgba(77, 77, 108),
                                            activeColor:
                                                ColorUtil.rgba(254, 45, 102),
                                            materialTapTargetSize:
                                                MaterialTapTargetSize
                                                    .shrinkWrap,
                                            visualDensity: VisualDensity(
                                                horizontal: -4, vertical: -2),
                                            onChanged: (bool val) {
                                              print('object$val');
                                              this.setState(() {
                                                this.check = val;
                                              });
                                            }))))
                          ])),
                      Expanded(
                          child: RichText(
                              maxLines: 10,
                              text: TextSpan(
                                  style: TextStyle(
                                      fontSize: 12,
                                      height: 1.5,
                                      color: ColorUtil.rgba(255, 255, 255, 1)),
                                  children: [
                                    TextSpan(
                                      recognizer: _agree(),
                                      text: '已阅读并同意',
                                    ),
                                    TextSpan(
                                        text: '《用户协议》',
                                        style: TextStyle(
                                            color: ColorUtil.rgba(
                                                100, 145, 217, 1)),
                                        recognizer: _recognizer(() {
                                          print('《用户协议》');
                                        })),
                                    TextSpan(
                                        text: '《隐私政策》',
                                        style: TextStyle(
                                            color: ColorUtil.rgba(
                                                100, 145, 217, 1)),
                                        recognizer: _recognizer(() {
                                          print('《隐私政策》');
                                        })),
                                    TextSpan(
                                      text: '和',
                                      recognizer: _agree(),
                                    ),
                                    TextSpan(
                                        text: '《联通统一认证服务条款》',
                                        style: TextStyle(
                                            color: ColorUtil.rgba(
                                                100, 145, 217, 1)),
                                        recognizer: _recognizer(() {
                                          print('《联通统一认证服务条款》');
                                        })),
                                  ])))
                    ],
                  ),
                ),
                SizedBox(
                  height: 32,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    SVG.icon(
                      'apple',
                      size: 44,
                      color: Colors.yellow,
                    ),
                    SVG.icon(
                      'share_qq',
                      size: 44,
                      color: Colors.yellow,
                    ),
                    SVG.icon(
                      'share_wx',
                      size: 44,
                      color: Colors.yellow,
                    ),
                    SVG.icon(
                      'weibo',
                      size: 44,
                      color: Colors.yellow,
                    )
                  ],
                )
              ]))
        ])));
  }

  TapGestureRecognizer _recognizer(Function fn) {
    return TapGestureRecognizer()
      ..onTap = () {
        fn();
      };
  }

  _agree() {
    return _recognizer(() {
      print('已阅读并同意');
      this.setState(() {
        this.check = !this.check;
      });
    });
  }

  void dispose() {
    super.dispose();
  }
}
